import React from "react";
import SearchComps from "../../../components/searchComps";
import TableComps from "../../../components/tableComps";
import { Button } from "antd";
import Edit from "./edit";
class BossList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 搜索组件配置
      searchComps: [
        {
          comType: "input",
          inputType: "text",
          value: "",
          placeholder: "请输入姓名",
          label: "姓名",
        },
        {
          comType: "input",
          inputType: "number",
          value: "",
          placeholder: "请输入手机号",
          label: "手机号",
        },
      ],
      searchParams: {}, // 搜索参数
      // 表头参数
      columns: [
        {
          title: "姓名",
          dataIndex: "bossName",
        },
        {
          title: "手机号",
          dataIndex: "mobile",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
        },
        {
          title: "操作",
          key: "action",
          render: (text, record, i) => {
            return (
              <span>
                <Button
                  type="primary"
                  onClick={() => {
                    this.openEdit(record, "open");
                  }}
                >
                  编辑{" "}
                </Button>{" "}
              </span>
            );
          },
        },
      ],
      // 表格数据
      dataSource: [],
      // 分页参数
      pagination: {
        showTotal: (total) => `共${total}条`,
        current: 1,
        pageSize: 10,
        defaultCurrent: 1,
        total: 0,
      },
      visible: false,
      currentEdit: "",
    };
  }
  openEdit = (item, action) => {
    if (action === "open" && item) {
      // 第一次打开操作
      this.setState({
        visible: true,
        currentEdit: item,
      });
    } else if (action === "cancel") {
      // 取消操作
      this.setState({
        visible: false,
        currentEdit: null,
      });
    } else if (action === "saveOk") {
      // 提交确定操作  更新数据
      this.setState(
        {
          visible: false,
          currentEdit: null,
        },
        () => {
          this.initList();
        }
      );
    }
  };

  exportTable = () => {
    console.log(this.state, 999);
  };
  componentDidMount() {
    this.initList();
  }
  initList = async () => {
    const { current: currentPage, pageSize: showCount } = this.state.pagination;
    let data = {
      currentPage,
      showCount,
      ...this.state.searchParams,
    };
    let res = await this.$post({
      url: "/admin/boss/findBossList",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      data,
    });
    if (res.code === 200) {
      const { result: list, totalResult } = res.datas;
      this.setState({
        dataSource: list,
        pagination: Object.assign(
          {
            ...this.state.pagination,
          },
          {
            total: totalResult,
          }
        ),
      });
    }
  };
  searchChange = (value, i) => {
    const searchParams = this.state.searchComps.map((item,j) => {
      if(i===j){
        item.value+= value
      }
      if (typeof item.value === "string") {
        return item.value.replace(/\s/g, "");
      }
      console.log(value, i,item);
      return item.value;
    });
    console.log(searchParams,this.state.searchComps)
    // this.setState({
    //   searchParams: {
    //     bossName: searchParams[0],
    //     mobile: searchParams[1]
    //   }
    // });
  };
  subSearch = () => {
    this.setState(
      {
        pagination: Object.assign(
          {
            ...this.state.pagination,
          },
          {
            current: 1,
          }
        ),
      },
      () => {
        this.initList();
      }
    );
  };
  tableChange = (pagination) => {
    this.setState(
      {
        pagination: pagination,
      },
      () => {
        this.initList();
      }
    );
  };
  render() {
    let {
      searchComps,
      dataSource,
      columns,
      pagination,
      visible,
      currentEdit,
    } = this.state;
    return (
      <div>
        <SearchComps
          subSearch={this.subSearch}
          searchChange={this.searchChange}
          searchComps={searchComps}
        >
          {{
            searchBtn: (
              <Button type="primary" onClick={this.exportTable}>
                导出表格{" "}
              </Button>
            ),
          }}{" "}
        </SearchComps>{" "}
        <TableComps
          dataSource={dataSource}
          columns={columns}
          pagination={pagination}
          onChange={this.tableChange}
        />{" "}
        {visible && (
          <Edit
            visible={visible}
            openEdit={this.openEdit}
            currentEdit={currentEdit}
          />
        )}{" "}
      </div>
    );
  }
}
export default BossList;
